
import './index.scss'
import { Component, PureComponent, memo, useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, Space, Table, PageHeader, Switch, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getall, del, select } from '../../../../api/paymember_ssh'
import { logDOM } from '@testing-library/react';
import fomat from '../../../../utils/formatDay_ssh'
//面包屑
const routes = [
    {
        path: '/',
        breadcrumbName: '用户管理',
    },
    {
        path: '/home/user/free-member',
        breadcrumbName: '付费会员卡管理',
    },

];
//开关
const onChange = (checked) => {
    console.log(`switch to ${checked}`);
};

const PayMember = () => {
    const [data, setData] = useState([])
    useEffect(() => {
        getmember()

    }, [])
    const Navigate = useNavigate()
    //搜索
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //编辑
    const mod = () => {
        Navigate('/home/user/Mod_paymember')
    }
    //新增
    const add = () => {
        Navigate('/home/user/Add_paymember')
    }
    //表格
    const columns = [
        {
            title: '会员卡名称',
            dataIndex: 'cardName',
            key: 'cardName',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '有效时长',
            dataIndex: 'effecticeTime',
            key: 'effecticeTime',
        },
        {
            title: '价格（元）',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '划线价（元）',
            key: 'markPrice',
            dataIndex: 'markPrice',
        },
        {
            title: '特权描述',
            key: 'privilegeDescribe',
            dataIndex: 'privilegeDescribe',
        },
        {
            title: '类型状态',
            key: 'cardState',
            render: (_, record) => (
                <Space size="middle">
                    < Switch defaultChecked onChange={onChange} checked={record.cardState == '0' ? true : false} />
                </Space>
            ),
        },
        {
            title: '最后修改时间',
            key: 'overTime',
            dataIndex: 'overTime',
        },
        {
            title: '操作',
            key: 'caozuo',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={mod}>编辑</a>
                    <a onClick={() => { delmember(record.vipCardId) }}>删除</a>
                </Space>
            ),
        },
    ];
    // const data = []
    const showTotal = (total) => `数量 ${total} 条`;
    //请求全部数据
    const getmember = () => {
        getall().then((res) => {
            console.log(res);
            let _data = res.data
            _data.forEach(v => {
                v.overTime = fomat(v.overTime)
            });
            setData(_data)
            // console.log(_data);
        })
    }
    //删除请求
    const delmember = (id) => {
        del(id).then((res) => {
            if (res.code == 200) {
                message.success('删除成功');
            } else {
                message.error('删除失败');
            }
            getmember()
        })
    }

    //修改请求
    const modmember = () => {
        mod().then((res) => {
            console.log(res);
        })
    }
    return <div className='paymember'>
        {/* 头部 */}
        <div className="header">
            <PageHeader
                className="site-page-header"
                title="付费会员卡管理"
                breadcrumb={{
                    routes,
                }}

            />
            {/* 以上为头部 */}
        </div>

        {/* 表格 */}
        <div className="content">
            <div className="top">
                <h3>付费会员卡列表</h3>
                <Button type="primary" icon={<PlusOutlined />} className='btn3' onClick={add}>新建</Button>
            </div>
            <Table rowKey={(record) => record.vipCardId} columns={columns} dataSource={data} pagination={{
                total: data.length,
                showTotal: showTotal,
                showSizeChanger: true,
                showQuickJumper: true,

            }} />
        </div>
    </div>
}
export default PayMember;
